<template>
  <div
    style="display: flex;"
    :style="style"
    class="size">
    <slot/>
  </div>
</template>

<script>
  export default {
    name: 'PSpace',
    props: {
      justify: {
        type: String,
        default: 'start',
        validator: function(value) {
          return ['start', 'end', 'center', 'space-around', 'space-between'].indexOf(value) !== -1
        }
      },
      align: {
        type: String,
        default: '',
        validator: function(value) {
          return ['', 'start', 'end', 'center', 'stretch', 'baseline'].indexOf(value) !== -1
        }
      },
      direction: {
        type: String,
        default: 'row',
        validator: function(value) {
          return ['row', 'column'].indexOf(value) !== -1
        }
      },
      // 每个子元素之间的间距，String类型,如"20px"、"20rem"、"2%"等
      size: {
        type: String,
        default: ''
      }
    },
    methods: {
      filterStyle(value) {
        switch (value) {
        case 'start':
          return 'flex-start'
        case 'end':
          return 'flex-end'
        case '':
          return undefined
        }
        return value
      }
    },
    computed: {
      style() {
        return {
          justifyContent: this.filterStyle(this.justify),
          alignItems: this.filterStyle(this.align),
          flexDirection: this.direction,
          '--size': this.size
        }
      }
    }
  }
</script>

<style lang="less" scoped>

  div.size > * {
    margin-right: var(--size);

    &:last-child {
      margin-right: 0;
    }
  }
</style>
